<template>
  <div id="login">
    <nav-bar>
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
      <template #center> 登陆</template>
      <template #right> <span>•••</span> </template>
    </nav-bar>
    <my-content>
      <div class="login">
        <van-form @submit="onLogin">
          <van-field
            v-model="user.tel"
            type="tel"
            name="tel"
            label="用户名"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写用户名！' }]"
          />
          <van-field
            v-model="user.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '密码不能为空！' }]"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="primary"
              color="#ff8198"
              native-type="submit"
            >
              登陆
            </van-button>
          </div>
          <div class="message" @click="regist">没有账号？点击注册</div>
        </van-form>
        <van-popup v-model:show="show" position="top" round>
          <nav-bar style="position: static">
            <template #center>注册</template>
          </nav-bar>
          <van-form @submit="onRegist">
            <van-field
              v-model="registData.name"
              name="name"
              label="昵称"
              placeholder="昵称"
              :rules="[{ required: true, message: '请填写昵称' }]"
            />
            <van-field
              v-model="registData.password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="registData.tel"
              type="tel"
              name="tel"
              label="电话"
              placeholder="电话"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
              v-model="registData.intro"
              name="intro"
              label="介绍"
              placeholder="介绍"
              :rules="[{ required: true, message: '请填写个人介绍' }]"
            />
            <div style="margin: 16px">
              <van-button
                round
                block
                type="primary"
                color="#ff8198"
                native-type="submit"
              >
                注册
              </van-button>
            </div>
          </van-form>
        </van-popup>
      </div>
    </my-content>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";
import MyContent from "@/components/common/content/Content.vue";

export default {
  name: "Login",
  data() {
    return {
      registData: {
        name: "",
        tel: "",
        intro: "",
        password: "",
      },
      user: {
        tel: "",
        password: "",
      },
      show: false,
    };
  },
  methods: {
    regist() {
      this.show = true;
    },
    onLogin(value) {
      let userList = JSON.parse(localStorage.getItem("userList"));

      if (userList) {
        for (let item of userList) {
          if (value.tel === item.tel && value.password === item.password) {
            sessionStorage.setItem("currentUser", JSON.stringify(item));
            this.$router.push("/home");
            return;
          } else {
            alert("用户名或密码错误");
          }
        }
      } else {
        alert("用户名或密码错误");
      }
    },
    onRegist(value) {
      let userList = JSON.parse(localStorage.getItem("userList"));
      if (userList) {
        if (userList.filter((item) => item.tel === value.tel).length === 0) {
          value.cartList = [];
          userList.push(value);
          localStorage.setItem("userList", JSON.stringify(userList));
          alert("注册成功！");
          this.onLogin(value);
        } else {
          alert("用户已存在！");
        }
      } else {
        userList = [];
        value.cartList = [];
        userList.push(value);
        localStorage.setItem("userList", JSON.stringify(userList));
        alert("注册成功！");
        this.onLogin(value);
      }
    },
  },
  components: {
    NavBar,
    MyContent,
  },
};
</script>

<style scoped>
#login {
  overflow: hidden;
}
</style>
